<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="#{brokers.title}">Brokers - SnackMQ Console</title>
</head>
<body>
<section>
    <div class="d-flex justify-content-between align-items-center flex-wrap mb-4 gap-2">
        <h4 class="mb-0" th:text="#{brokers.broker.nodes}">Broker Nodes</h4>
        <!-- 新增：实时更新状态指示器 -->
        <div id="refresh-status" class="text-muted small align-self-center">
            <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
            <span th:text="#{dashboard.live.update}">Live Update</span>
        </div>
    </div>

    <div th:if="${error}" class="alert alert-danger" role="alert" th:text="#{brokers.error.loading}">
        Error loading data.
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover shadow-sm border-0 rounded">
            <thead class="table-dark">
            <tr>
                <th th:text="#{brokers.broker.address}">Address</th>
                <th th:text="#{brokers.role}">Role</th>
                <th th:text="#{brokers.status}">Status</th>
            </tr>
            </thead>
            <!-- 修改：为 tbody 增加 id，方便 JS 操作 -->
            <tbody id="broker-table-body">
            <!-- 初始内容由 Thymeleaf 渲染，后续由 JS 更新 -->
            <tr th:each="broker : ${brokers}">
                <td th:text="${broker.address}">localhost:9876</td>
                <td>
                    <span th:if="${broker.metaLeader}" class="badge bg-primary me-1" th:text="#{brokers.meta.leader}">Meta Leader</span>
                    <span th:if="${broker.dataLeader}" class="badge bg-info text-dark me-1" th:text="#{brokers.data.leader}">Data Leader</span>
                    <!-- 【修复】当只有一个节点且它还不是Leader时，显示“Initializing...”而不是“Follower”，这更符合实际情况 -->
                    <span th:if="${#lists.size(brokers) == 1 && !broker.metaLeader && !broker.dataLeader}"
                          class="badge bg-warning text-dark" th:text="#{brokers.initializing}">Initializing...</span>
                    <!-- 【修复】只有在多于一个节点时，才将非Leader节点显示为“Follower” -->
                    <span th:if="${#lists.size(brokers) > 1 && !broker.metaLeader && !broker.dataLeader}"
                          class="badge bg-secondary" th:text="#{brokers.follower}">Follower</span>
                </td>
                <td>
                    <span class="badge bg-success" th:text="${broker.status}">ALIVE</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    
    <!-- 隐藏的i18n字符串，供JavaScript使用 -->
    <div id="i18n-strings" style="display: none;">
        <span data-i18n="dashboard.live.update" th:text="#{dashboard.live.update}">Live Update</span>
        <span data-i18n="brokers.update.failed" th:text="#{brokers.update.failed}">Update Failed</span>
        <span data-i18n="brokers.meta.leader" th:text="#{brokers.meta.leader}">Meta Leader</span>
        <span data-i18n="brokers.data.leader" th:text="#{brokers.data.leader}">Data Leader</span>
        <span data-i18n="brokers.initializing" th:text="#{brokers.initializing}">Initializing...</span>
        <span data-i18n="brokers.follower" th:text="#{brokers.follower}">Follower</span>
        <span data-i18n="brokers.status.alive" th:text="#{brokers.status.alive}">ALIVE</span>
    </div>
    
    <th:block th:replace="~{fragments/js/brokers-js :: js}"></th:block>
</section>
</body>
</html>